import * as echarts from 'echarts';
import React from 'react';

export declare type ChartTitleOption =
  | {
      show?: boolean;
      text?: React.ReactNode;
      link?: string;
      target?: 'blank' | 'self';
      textStyle?: React.CSSProperties;
      onTexteClick?: (e: Event) => void;
      subtext?: React.ReactNode;
      sublink?: string;
      subtarget?: 'blank' | 'self';
      subtextStyle?: React.CSSProperties;
      onSubtextClick?: (e: Event) => void;
      itemGap?: number;
      boxStyle?: React.CSSProperties;
    }
  | null
  | undefined;

export declare type ChartLegendOption =
  | {
      type?: 'plain' | 'scroll';
      show?: boolean;
      boxStyle?: React.CSSProperties;
      itemGap?: number;
      // pageFormatter?: `{${number}}/{${number}}` | ((current: number, total: number) => string);
      selected?: {
        [key: string]: boolean;
      };
      data?: Array<{
        name: React.ReactNode;
        // icon?: string;
        itemStyle?: React.CSSProperties;
        textStyle?: React.CSSProperties;
      }>;
    }
  | null
  | undefined;

export interface CustomChartOptions extends echarts.EChartsCoreOption {
  title?: ChartTitleOption;
  legend?: ChartLegendOption;
}

export interface RSEChartProps {
  option?: CustomChartOptions;
}
